<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滚动式轮播</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.wrap{
			width: 820px;
			height: 400px;
			background-color: yellow;
		}
		.wrap .picBox{
			width: 820px;
			height: 340px;
			background-color: red;
			overflow:hidden;
		}
		.wrap .picBox .banner{
			width: 4100px;
			height: 340px;
			background-color: purple;
			transition:all 1s;
		}
		.wrap .picBox li{
			float:left;
			list-style:none;
		}
		.wrap .picBox img{
			display:block;
		}
		.wrap .lisNav li{
			width: 164px;
			height: 60px;
			background-color: black;
			color:white;
			list-style:none;
			float:left;
			line-height:60px;
			text-align:center;
		}
		.wrap .lisNav .active{
			background-color: #ccc;
			color:red;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="picBox">
			<ul class="banner">
				<li><img src="images/111.jpg" alt=""></li>
				<li><img src="images/222.jpg" alt=""></li>
				<li><img src="images/333.jpg" alt=""></li>
				<li><img src="images/444.jpg" alt=""></li>
				<li><img src="images/333.jpg" alt=""></li>
			</ul>
		</div>
			<ul class="lisNav">
				<li class="active">iG冠军庆典之月</li>
				<li>2019季前赛专题睡衣</li>
				<li>守护者全新上线</li>
				<li>蓝色精萃商店开启</li>
				<li>守护者全新上线</li>
			</ul>
	</div>
	<script>
		var lisNav=document.querySelector(".lisNav")
		var lis=lisNav.getElementsByTagName('li')
		var banner=document.querySelector(".banner")
		for(var n=0;n<lis.length;n++){
			lis[n].index=n;
			lis[n].onmouseenter=function(){
				for(var j=0;j<lis.length;j++){
					lis[j].className=""
				}
				banner.style.marginLeft=-this.index*820+"px"
				lis[this.index].className="active"

			}

		}
	</script>
</body>
</html>